﻿<%@ Page Title="设计店铺" Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeBehind="designer.aspx.cs" Inherits="map.designer" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">

<style type="text/css">     
    *
    {    
        font-size: small;
        margin: 0;
        padding: 0;    
    }
    .MainDiv
    {
        width:1055px;
        text-align:left ;
    } 
    .headerdiv
    {
        text-align:right;
        margin:5px 0px 5px 0px;
    }
    .CateNavDiv
    {
        margin-top:30px;
        width:100%;
        height:23px;  
        border-bottom:solid 1px lightGray;
    }
    .CateNavDiv ul li
    {
        display:inline;
        list-style-type:none;
        background:url(/img/tagleft.gif) no-repeat left bottom;
        margin-left:10px;
        height:23px;
        float:left;  
    }
    .CateNavDiv ul li a
    {
        padding-left:10px;
        padding-right:10px;
        line-height:23px;
        height:23px;
        background:url(/img/tagright.gif) no-repeat right bottom;
        float:left;
                    
    }
    .CateNavDiv ul li.selected
    {                
        background:url(/img/tagleft.gif) no-repeat left top; 
        margin-bottom:-2px;
        height:25px;          
    }
    .CateNavDiv ul li.selected a
    {
        background:url(/img/tagright.gif) no-repeat right top;   
          line-height:25px;
          height:25px;         
    }
    .CateOprDiv
    {
        margin-top:10px;
        width:100%;
    }
     #content_member 
     {
         background:url(/img/header_bg.png) no-repeat right -90px;
         width:100px;   
         padding-right:13px;                          
     }
     .designDiv
     {
        margin:10px 0px 10px 0px;   
     }
     .lengendDiv
     {
         border:solid 1px lightGray;
     }
     .shopstyle_td
     {
         padding:0px 5px 0px 5px;
     }
     .shopstyle_table
     {
         width:100%;
         border-top:dashed 1px lightgray;
     }
     .shopstyle_table td
     {
         border-bottom:dashed 1px lightgray;
     }
     .shopstyle_table td label
     {
         cursor:pointer;
     }
     .changstylebutton
     {
         background:url(/img/back-button115_23.gif) no-repeat;
         width:115px;
         height:23px;   
         line-height:23px; 
         padding:5px 15px 5px 15px;  
         cursor:pointer ;
         text-align:center;  
         color:Blue;
         text-decoration:none;
     }
     .openShopAnchor
     {
         background:url(/img/back-button115_23.gif) no-repeat;
         width:115px;
         height:23px;
         padding:5px 20px 5px 20px;  
         cursor:pointer ; 
         text-align:center;
         text-decoration:none;
         color:Blue;
     }
     #thumbnails img
     {
         background-color:#ffffff;
     }
     .td_0
     {
         width:35%;
         text-align:right; 
         vertical-align:top;    
     }                    
     .td_1
     {
         width:65%;
         text-align:left;
         vertical-align:top;
     }
      .td_00
     {
         width:25%;
         text-align:right; 
         vertical-align:top;    
     }                    
     .td_10
     {
         width:75%;
         text-align:left;
         vertical-align:top;   
     }
</style> 
    <link href="swf/css/default.css" rel="stylesheet" type="text/css"></link>
	<script type="text/javascript" src="swf/swfupload/swfupload.js"></script>
	<script type="text/javascript" src="swf/js/handlers.js"></script>
	<script type="text/javascript">
	    var swfu;                      
	    window.onload = function() {
	        swfu = new SWFUpload({
	            // Backend Settings
	            upload_url: "swf/upload.aspx",
	            post_params: {
	                "ASPSESSID": "<%=Session.SessionID %>"
	            },

	            // File Upload Settings
	            file_size_limit: "120 KB",
	            file_types: "*.jpg;*.png;*.gif",
	            file_types_description: "JPG Images",
	            file_upload_limit: "0",    // Zero means unlimited

	            // Event Handler Settings - these functions as defined in Handlers.js
	            //  The handlers are not part of SWFUpload but are part of my website and control how
	            //  my website reacts to the SWFUpload events.
	            file_queue_error_handler: fileQueueError,
	            file_dialog_complete_handler: fileDialogComplete,
	            upload_start_handler: uploadStart,
	            upload_progress_handler: uploadProgress,
	            upload_error_handler: uploadError,
	            upload_success_handler: uploadSuccess,
	            upload_complete_handler: uploadComplete,

	            // Button settings
	            button_image_url: "/swf/images/XPButtonNoText_160x22.png",
	            button_placeholder_id: "spanButtonPlaceholder",
	            button_width: 160,
	            button_height: 22,
	            button_text: '<span class="button" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;选择标题图片</span>',
	            button_text_style: '.button { font-family: Helvetica, Arial, sans-serif; font-size: 14pt; } .buttonSmall { font-size: 10pt; }',
	            button_text_top_padding: 1,
	            button_text_left_padding: 5,
	            button_cursor: SWFUpload.CURSOR.HAND,
                button_action:SWFUpload.BUTTON_ACTION.SELECT_FILE ,
	            // Flash Settings
	            flash_url: "swf/swfupload/swfupload.swf", // Relative to this file
                
                

	            custom_settings: {
	                upload_target: "divFileProgressContainer"
	            },

	            // Debug Settings
	            debug: false
	        });
	    }
	</script>                
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <center>
        <div class="MainDiv">
            <div  class="headerdiv">
                &nbsp;&nbsp;&nbsp;
                <asp:HyperLink ID="HyperLink_login" runat="server" >登录</asp:HyperLink>
                <img src="/img/shuxian.gif" />&nbsp;
                <asp:HyperLink ID="HyperLink_logout" runat="server" NavigateUrl="/member/loginout.aspx" >注销</asp:HyperLink>
                <img src="/img/shuxian.gif" />&nbsp;
                <a title="藏宝网" id="content_member" rel="DIV_member" href="index.aspx" target="_blank">会员中心</a> 
            </div>
            
            <div class="designDiv">
                <fieldset>
                    <legend style=" font-size:larger; color:Black; padding:0px 10px 0px 10px; font-weight:bold ;">设计店铺页面风格</legend>
                    <div style=" padding:10px 10px 0px 10px;">
                        <h1>请选择您将要更改的风格：</h1>
                    </div>                                                     
                    <div id="shopStyleDiv" style=" padding:10px 10px 10px 10px;">
                        <input  id="shopStyleRadio_default" name="shopStyleRadio" type="radio" value="s_i" /> <label for="shopStyleRadio_default">默认风格</label>                       
                    </div>
                    <div style=" text-align:left ; padding:0px 10px 10px 10px;"> 
                        <a  class="changstylebutton" onclick="changeShopStyle();">更改为选中风格</a>
                        <a  class="changstylebutton" onclick="selectCurrentStyle();">显示当前的风格</a>
                        <a class="openShopAnchor" target="_blank" id="OpenShopAnchor">打开我的店铺</a> 
                        <span  style=" font-size:smaller;color:red; padding-left:20px">(注意：修改页面风格的时候会将标题图片清空)</span>
                    </div>
                </fieldset> 
                 <br />
                <fieldset>
                    <legend style=" font-size:larger;color:Black; padding:0px 10px 0px 10px; font-weight:bold ;">选择标题图片</legend>
                    <div id="bannerPicDiv" style=" margin:10px 5px 10px 5px;">
                        <table width="100%">
                            <tr>
                                <td style=" width:350px">
                                    <table width="100%">
                                        <tr>
                                            <td class="td_0"  style=" width:50%;">
                                                默认标题图片：
                                            </td>
                                            <td  class="td_1" style=" width:50%;" >
                                                 <div style="border:dashed 1px lightGray;text-align:center; padding-top:3px;width:106px;height:106px;">
                                                    <img id="SystemDefaultImg"  src='<%=SystemDefaultShopBanner %>' style=" width:100px; height:100px;" />
                                                 </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="td_0" style=" width:50%; padding-top:5px;" >
                                                当前标题图片：
                                            </td>
                                            <td  class="td_1"  style=" width:50%;  padding-top:5px;">
                                                 <div style="border:dashed 1px lightGray;text-align:center; padding-top:3px;width:106px;height:106px;">
                                                    <img id="CurrentBannerImg" runat="server" style=" width:100px; height:100px;" />
                                                    <span id="NoBannerSpan" runat="server" style="color:Gray;padding-top:20px;">暂无标题图片</span>
                                                 </div>
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                                <td style=" width:500px">
                                     <div id="swfu_container" style="margin: 0px 10px;">  		                                 
                                        <table width="100%">
                                            <tr>
                                                <td class="td_00"  >
                                                    选择：
                                                </td>
                                                <td  class="td_10" >
                                                     <div>
		                                                <span id="spanButtonPlaceholder" ></span>  <br />
		                                                <span style="font-size:smaller;color:Red;">大小不大于120KB,像数建议为:740×180</span>
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="td_00" >
                                                    图片状态：
                                                </td>
                                                <td  class="td_10" >
                                                     <div id="divFileProgressContainer" style="height: 45px;"></div>                                                     
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="td_00" >
                                                    图片大小：
                                                </td>
                                                <td  class="td_10" >
                                                    <span id="FileSizeDiv" style=" color:Blue;"> </span> 
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="td_00" >
                                                    图片：
                                                </td>
                                                <td  class="td_10" >
                                                    <div id="thumbnails" style="width:110px ; height:110px; border:dashed 1px lightGray;"></div>
                                                </td>
                                            </tr>
                                        </table>
	                                </div> 
                                </td>
                                <td style=" vertical-align:top;">
                                     <a  href="#save" class="changstylebutton" onclick="UploadImgAndReplaceBanner();">保存选中的图片</a><br /><br />
                                     <a  href="#prev" class="changstylebutton" onclick="UploadImgAndReviewBanner();">预览选中的图片</a>   <br /><br />
                                     <a  href="#default" class="changstylebutton" onclick="UserDefaultBanner();">使用默认的图片</a>   <br />  <br />
                                     <a  href="#clear" class="changstylebutton" style="padding:5px 20px 5px 20px;" onclick="ClearBanner();">清空标题图片</a>
                                </td>
                            </tr>
                        </table>                          	                    
                    </div>
                </fieldset>        
            </div>
            
            
            <div class="CateNavDiv">
                <ul id="CateNaveUl">
                    <li class="selected"><a  id="#shop" href ="#shop" style=" text-decoration:none;"  title="点击刷新" onclick="selectCurrentStyle();">店铺页面浏览</a></li>      
                </ul>
            </div> 
            
            <div class ="CateOprDiv">
                <iframe id="CateOprFrame" name="CateOprFrame"  frameborder="0"   width="100%"  scrolling="no"  style=" border:solid 2px lightGray" >
                </iframe>
            </div>
        </div>    
        <div id="DIV_member" style="position: absolute; visibility: hidden; border: 1px solid Gray;
            background-color: White; width: 65px; padding: 4px; z-index: 100;">
            <a href="/member/pinfo.aspx">个人信息</a><br />
            <a href="/member/pfriends.aspx">我的好友</a><br />
            <a href="/member/pshop.aspx">我的店铺</a><br />
            <a href="/member/pbbs.aspx">我的论坛</a><br />           
        </div>
    </center> 
    
    <script type="text/javascript" src="/js/dropdowncontent.js"></script> 
    <script type="text/javascript">
        dropdowncontent.init("content_member", "left-bottom", 300, "mouseover")

        var currentUserId = "";
        var shopStyleArray = [["s_i", "默认风格"], ["s_i_red", "红色风格"], ["s_i_orange", "橙色风格"]
                              , ["s_i_yellow", "黄色风格"], ["s_i_green", "绿色风格"], ["s_i_blue", "蓝色风格"]
                              , ["s_i_purple", "紫色风格"], ["s_i_gray", "灰色风格"], ["s_i_black", "黑色风格"]];
        function initShopStyle() {
            var col = 6;
            var row =Math.ceil ( shopStyleArray.length /col);
            var shopstyleDiv = document.getElementById("shopStyleDiv");
            shopstyleDiv.innerHTML = "";                        
            var tableEleStr = ""; 
            var newTrStr = "";
            for (var i = 0; i <(row*col); i++) {
                if ((i % col) == 0) {
                    newTrStr = "<tr>";
                }
                if (i < shopStyleArray.length) {
                    newTrStr += '<td><input style="cursor:pointer;" id="shopStyleRadio_' + shopStyleArray[i][0] + '" name="shopStyleRadio" type="radio" value="' + shopStyleArray[i][0] + '" /> <label id="shopStyleLabel_' + shopStyleArray[i][0] + '" for="shopStyleRadio_' + shopStyleArray[i][0] + '">' + shopStyleArray[i][1] + '</label></td> ';
                }
                else {
                    newTrStr += "<td>&nbsp;</td>";
                }
                if ((i % col) == (col-1)) {
                    newTrStr += "</tr>";
                    tableEleStr += newTrStr;
                }
            }
            shopstyleDiv.innerHTML = '<table class="shopstyle_table">' + tableEleStr + "</table>";

            var result = AjaxFunction.GetCurrentUserRECId();
            if (result.value != null && result.value != "") {
                currentUserId = result.value;
                document.getElementById("OpenShopAnchor").href = "s.aspx?id=" + currentUserId;
            }
            else {     
                return;
            }
            
            var allShopStyleRadios = document.getElementsByName("shopStyleRadio");
            for (var i = 0; i < allShopStyleRadios.length; i++) {
                allShopStyleRadios[i].onclick = function() {
                document.getElementById("CateOprFrame").src = "s.aspx?id=" + currentUserId + "&css=" + this.value + "&shopbanner= &v=" + ((new Date()).toLocaleTimeString());
                    document.getElementById("#shop").innerHTML = "店铺页面--" + document.getElementById("shopStyleLabel_"+this.value).innerHTML;
                }
            }    
        }

        function selectCurrentStyle() {
            document.getElementById("CateOprFrame").src = "s.aspx?id=" + currentUserId + "&v=" + ((new Date()).toLocaleTimeString());
            document.getElementById("#shop").innerHTML = "店铺页面--当前风格";
            clearAllShopStyleSelect();
        }

        function changeShopStyle() {
            var allShopStyleRadios = document.getElementsByName("shopStyleRadio");
            for (var i = 0; i < allShopStyleRadios.length; i++) {
                if (allShopStyleRadios[i].checked == true) {
                    var result = AjaxFunction.changeShopStyle(allShopStyleRadios[i].value);
                    if (result.value != null) {
                        if (result.value != "") {
                            alert("风格更改失败：" + result.value);
                        }
                        else {
                            document.getElementById("CateOprFrame").src = "s.aspx?id=" + currentUserId + "&css=" + allShopStyleRadios[i].value + "&v=" + ((new Date()).toLocaleTimeString());
                            showCurImg(false);
                            alert("风格更改成功！");
                        }
                    }
                    return;
                }
            }
            alert("您当前没有选中格式！");
        }

        function UploadImgAndReplaceBanner() {
            var curImgEle = document.getElementById("thumbnails").childNodes[0];
            var imgSrc = curImgEle.src;
            var index = imgSrc.toLowerCase().indexOf("id=");
            var id = imgSrc.substring(index + 3, imgSrc.length);
            var result = SwfUploadFile.SaveFiles(id);
            if (result.value != null && result.value != "") {
                var curBannerImgEle = document.getElementById("ctl00_ContentPlaceHolder1_CurrentBannerImg");
                curBannerImgEle.src = result.value;
                showCurImg(true);
                selectCurrentStyle();                                              
                alert("更改成功！");
            }
            else {
                alert("更改失败！");
            }
        }

        function UploadImgAndReviewBanner() {
            var curImgEle = document.getElementById("thumbnails").childNodes[0];
            var imgSrc = curImgEle.src;
            document.getElementById("CateOprFrame").src = "s.aspx?id=" + currentUserId + "&shopbanner=" + imgSrc + "&v=" + ((new Date()).toLocaleTimeString());
            document.getElementById("#shop").innerHTML = "店铺页面--预览标题图片";
            clearAllShopStyleSelect();
        }
        
        function UserDefaultBanner() {
            var result = SwfUploadFile.SaveFiles("");
            if (result.value != null && result.value != "") {
                var curBannerImgEle =document.getElementById("ctl00_ContentPlaceHolder1_CurrentBannerImg");
                curBannerImgEle.src = result.value;
                showCurImg(true);
                selectCurrentStyle();
                alert("更改成功！");
            }
            else {
                alert("更改失败！");
            }
        }

        function ClearBanner() {
            var result = AjaxFunction.clearBanner();
            if (result.value != null) {
                if (result.value == "") {
                    document.getElementById("ctl00_ContentPlaceHolder1_CurrentBannerImg").src = "";
                    showCurImg(false);
                    selectCurrentStyle();
                    alert("清空成功！");
                }
                else {
                    alert("清空失败："+result.value);
                }
            }
        }

        function clearAllShopStyleSelect() {
            var allShopStyleRadios = document.getElementsByName("shopStyleRadio");
            for (var i = 0; i < allShopStyleRadios.length; i++)
                allShopStyleRadios[i].checked = false;
        }
        function showCurImg(isShow) {
            var curBannerImgEle = document.getElementById("ctl00_ContentPlaceHolder1_CurrentBannerImg");
            var noBannerSpanEle = document.getElementById("ctl00_ContentPlaceHolder1_NoBannerSpan");
            curBannerImgEle.style.display = isShow ? "block" : "none";
            noBannerSpanEle.style.display = isShow ? "none" : "block";
        }
        
        initShopStyle();
        selectCurrentStyle();                                      
    </script>     
</asp:Content>
